<template>
    <div class="div_main_frame" style="text-align:center;margin:0 auto;margin-top:0px;padding-top:0px;" align="center">
        
    <div class="fastweb_div_middle" style="width:1500px;min-height:200px;text-align:center;margin-top:0px;padding-top:0px;">

        <div class="div_page_top_middle" style="width:auto;height:auto;margin:0;padding:0;text-align:center">
            <div class="div_main_frame" style="width:900px;height:auto;text-align:center;margin-left:300px">
              <div class="dingzhi_tile" style="text-align:center;">
                <strong>定制</strong>
              </div>
              <el-form ref="formRef" :model="form" label-width="120px">
              <el-form-item label="标题">
                <el-input id="dingzhi_id" placeholder="输入股票代码或名称，如:[600][银行]" type="search" v-model="form.title" v-on:focus="focus()" autocomplete=“off”></el-input>
                <div class="search_menu">
                  <ul class="input_suggest">
                <li v-for="input_val in input_list" :key="input_val" @click.left="select_li(input_val)">
                  {{input_val}}
                </li>
                </ul>
                </div>
              </el-form-item>
              <el-form-item label="类型" style="text-align:left">
                <el-select v-model="form.etype" placeholder="选择类型">
                  <el-option label="中国政策" value="100"></el-option>
              <el-option label="中美贸易战" value="101"></el-option>
              <el-option label="新冠疫情" value="102"></el-option>
                  <el-option label="联合国" value="180"></el-option>
                  <el-option label="美国政策" value="200"></el-option>
                  <el-option label="其它国外政策" value="299"></el-option>
                  <el-option label="国际关系" value="300"></el-option>
                  <el-option label="货币" value="301"></el-option>
                  <el-option label="其它国际事件" value="302"></el-option>
                  <el-option label="贸易" value="304"></el-option>
                  <el-option label="资源储备" value="305"></el-option>
              <el-option label="海关" value="306"></el-option>
              <el-option label="能源" value="307"></el-option>
              <el-option label="经济指标" value="308"></el-option>
              <el-option label="人口" value="309"></el-option>
              <el-option label="财政" value="310"></el-option>
              <el-option label="国债地方债" value="311"></el-option>
              <el-option label="水利" value="312"></el-option>
              <el-option label="基建" value="313"></el-option>
              <el-option label="反倾销" value="314"></el-option>
                  <el-option label="体育盛事" value="900"></el-option>
                  <el-option label="统计数据" value="901"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发布日期">
                <el-col :span="11">
                  <el-date-picker
                    v-model="form.date"
                    type="date"
                    value-format="YYYY-MM-DD"
                    placeholder="Pick a date"
                    style="width: 100%"
                  ></el-date-picker>
                </el-col>
              </el-form-item>

              <el-form-item label="网址">
                <el-input v-model="form.url"></el-input>
              </el-form-item>

              <el-form-item label="网站">
                <el-input v-model="form.site"></el-input>
              </el-form-item>


              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
              </el-form-item>
            </el-form>
            </div>

            <div class="div_main_frame" style="width:900px;height:auto;text-align:center;margin-left:300px">
                <div class="dingzhi_tile" style="text-align:center;">
            <strong>体验说明</strong>
            </div>
            <div class="about_text">
                <el-row align="left" style="text-align:left">
                <el-col :span="24">
                    <br/>
                    <p>&nbsp;&nbsp;1. 如果您觉得本服务为您带来了便捷，下方可微信扫码，按5元/次付费，不付费不会对使用造成影响。</p>
                    <br/>
                    <p>&nbsp;&nbsp;2. 数据生成预计在一天内完成，并通过邮箱进行通知，所以请仔细检查邮箱是否正确。</p>
                    <br/>
                </el-col>
                </el-row>

                <el-row align="center" style="text-align:left">
                  <el-col :span="24">
                    <div style="margin-right:50px;text-align:center;">
                    <img src="~@/assets/weixin.png" style="width:240px;"><br/>
                    </div>
                  </el-col>
                </el-row>

            </div>
            </div>
            
            <div class="div_main_frame" style="width:900px;height:auto;text-align:center;margin-left:300px">
            <div class="dingzhi_tile" style="text-align:center;">
            <strong>使用范例</strong>
            </div>
            <div class="about_text">
                <el-row align="left" style="text-align:center">
                <el-col :span="24">
                    <p>&nbsp;&nbsp;1.本站主要向用户提供全面可分析的股市关联数据；</p>
                    <br/>
                    <p>&nbsp;&nbsp;2.本站的数据全部来自于网络；</p>
                </el-col>
                </el-row>
            </div>
            </div>

            <div class="div_main_frame" style="width:900px;height:auto;text-align:center;margin-left:300px">
            <div class="dingzhi_tile" style="text-align:center;">
            <strong>服务宗旨</strong>
            </div>
            <div class="about_text">
                <el-row align="left" style="text-align:center">
                <el-col :span="24">
                    <p>&nbsp;&nbsp;1. 时间就是金钱，效率就是生命。帮用户节省大量找信息的时间，是建站的源动力。用数据说话；少说废话。</p>
                    <br/>
                    <p>&nbsp;&nbsp;2. 授之以鱼不如授之以渔。作为一个独立的交易者，需要掌握分析信息的能力。</p>
                    <br/>
                    <p>&nbsp;&nbsp;3. 用数据说话，少说废话。</p>
                    <br/>
                </el-col>
                </el-row>
            </div>
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
    </div>
    
    <ViewFooter/>
</template>

<script>
import { reactive,toRefs,watch } from 'vue'
import { getCurrentInstance } from 'vue'
import ViewFooter from '@/components/ViewFooter.vue'
import "@/assets/global.css"
import "@/assets/fastweb.css"

export default 
{
    name: 'PageDingzhi',
    components: {
        ViewFooter
    },
    setup(){
       const form = reactive({
            title: '',
            etype: '',
            date: '',
            url: '',
            site: '',
            });
        const host = getCurrentInstance()?.appContext.config.globalProperties.host
        const input_list = []
        const form_data = toRefs(form);
        /*watch(form,(newVal,oldVal)=>{
          console.log(newVal+":==="+oldVal)
        })*/
        watch(() => form_data.title, (oldVlaue, newValue) => {
          console.log("watch1:" + newValue);
          focus();
          console.log(oldVlaue, newValue, '改变')
        })
        return {form,form_data,host,input_list};
        
    },
    methods: {
        onSubmit() {
            console.log('submit5!' + this.form.title)
            var api_url = this.host.concat("/api/overall_add?title=").concat(this.form.title)
                          .concat("&date=").concat(this.form.date).concat("&type=").concat(this.form.etype)
                          .concat("&url=").concat(this.form.url).concat("&site=").concat(this.form.site)
            this.axios.get(api_url)
            .then(response => {
                if((response.status != 200) || (response.data.result != 0)){
                this.$message({
                    message: "添加失败",
                    type: "fail"
                });
                return;
                }
            })
            .catch(error => alert("添加失败"));
        },
      blur:function() {
        console.log("blur:");
        this.input_list=[];
      },
      focus:function(){
        console.log("focus:" + this.form.title.trim());
        if(document.querySelector('#dingzhi_id')==document.activeElement){
          console.log("focus:");
          this.fuzzy_search(this.form.title.trim());
        }
      },
      fuzzy_search:function(value){
          //this.input_list=["a", "b", "c"];
          //return;
          
          console.log("fuzzy_search:" + value);
          var that =this;
          that.input_list=[];
          if(!value){
              that.input_list=[];
              return;
          }

          var url = this.host.concat("/api/display_suggest?word=").concat(value);
          this.axios.get(url)
          .then(response => {
            if(response.status == 200){
            //if(response.data.code == 200){
              this.input_list = response.data.data;
            }
          })
          .catch(error => alert(error));

          //调取接口
          that.input_list=[];
      },
      select_li:function(input_val) {
        console.log("select:" + input_val);
        var lists = input_val.split("|")
        console.log("select1:" + lists[0] + lists[1] + lists[2]);
        this.form.title = input_val;
        this.input_list=[];
      }
    },
    mounted() {
        
    },
    watch:{
        form_data:function(){
            console.log("watch:" + this.form_data.title);
            this.focus();
        },
    },
}

var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c2ba86525ff37a3b2dd6cdadb129fdb5";
var s = document.getElementsByTagName("script")[0]; 
s.parentNode.insertBefore(hm, s);
</script>

<style>

.dingzhi_tile {
    text-align:left;
    padding-left:30px;
    line-height:50px;
    font-size: 24px;
    border-top:1px solid #009100;
    /*border-bottom:1px dashed #009100;*/
}

.about_tile {
    padding:30px;
    line-height:30px;
}

.search_menu {
  background-color: gold;
  top:40px;
  width:100%;
  height:auto;
  border:1ps solid blue;
  position: absolute;
  text-align: left;
  z-index: 10;
}

.search_menu ul{
  margin-bottom: 0;
  list-style-type: none;
}

.search_menu li {
  padding: 5px;
  font-size: 1.1em;
  cursor: pointer;
}

.search_menu li:hover {
  background-color: beige;
}

.search:hover .search_menu {
  display: block;
}


</style>
